<template>
	<view class="recommend">
	<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item>
					<view class="swiper-item">
						<image class="img" src="https://yanxuan.nosdn.127.net/89ddc38903cee9923e7d998a8a88ed08.jpg?type=webp&imageView&quality=75&thumbnail=750x0" mode=""></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<image class="img" src="https://yanxuan.nosdn.127.net/static-union/165406787637b102.jpg?type=webp&imageView&quality=75&thumbnail=750x0" mode=""></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<image class="img" src="https://yanxuan.nosdn.127.net/static-union/165339174537b102.jpg?type=webp&imageView&quality=75&thumbnail=750x0" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
	<view class="policyList">
		<view class="policyItem" v-for="item in indexData.policyDescList" :key="item.desc">
			<image :src="item.icon"></image>
			<text class="desc">{{item.desc}}</text>
		</view>
	</view>
	<view class="kingkongList" >
		<view class="kingkongItem" v-for="item in indexData.kingKongModule.kingKongList" :key="item.L1ID">
			<image class="kingkongImg" :src="item.picUrl"></image>
			<view class="kingkongDesc">{{item.text}}</view>
		</view>
	</view>
		<view class="categoryList">
				<view class="categoryItem" v-for="item in indexData.categoryModule" :key="item.titlePicUrl">
					<!-- 大图 -->
					<image class="categoryImg" :src="item.titlePicUrl" mode=""></image>
					<!-- 滑块  -->
					<scroll-view class="categoryScroll" scroll-x="true" enable-flex>
						<view class="goodsItem" v-for="goodsItem in item.itemList" :key="goodsItem.id">
							<image class="goodsImg" :src="goodsItem.showPicUrl" mode=""></image>
							<view class="goodsText">{{ goodsItem.name }}</view>
						</view>
					</scroll-view>
				</view>
			</view>
			</view>
</template>

<script>
	import {mapState} from 'vuex'
	export default {
		name:"Recommend",
		data() {
			return {	
			};
		},
		computed:{
			...mapState({
				indexData:state=>state.home.indexData
			})
		}
	}
</script>

<style lang="stylus">
.recommend
	.swiper
		height 350rpx
		image
			height 350rpx
			width 100%
	.policyList
		display: flex
		margin 10rpx 0
		.policyItem
			flex 1
			text-align center
			image
				width 40rpx
				height 40rpx
				vertical-align: middle
			.desc
				font-size 26rpx
	.kingkongList
		display flex
		flex-wrap wrap
		.kingkongItem
			width 20%
			margin 10rpx 0
			text-align: center
			.kingkongImg
				width 100rpx
				height 100rpx
	.categoryList
		.categoryItem
			margin 0 10rpx
			.categoryImg
				height 370rpx
				width: 100%
			.categoryScroll
				height: 300rpx
				display flex
				white-space nowrap
				.goodsItem
					height 300rpx
					margin 0 5rpx
				.goodsImg
					background-color: #f5f5f5
					width: 200rpx
					height 200rpx
				.goodsText
					white-space: pre-wrap
					overflow: hidden
					text-overflow: ellipsis
					display:  -webkit-box
					-webkit-box-orient: vertical
					-webkit-line-clamp: 2
					
				
		
	
	.test
		color: red
</style>